import React from 'react'
import { Form, Input, Button } from 'antd';
import "./SearchList.scss"
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const formItemLayoutWithOutLabel = {
    wrapperCol: {
        span: 18,
        offset: 5
    },
};
const PrivideResolution = () => {
    return (
        <Form.List name="privide_resolution" {...formItemLayoutWithOutLabel}>
            {(fields, { add, remove }) => {
                return (
                    <div>
                        <Form.Item label="可提供分辨率">
                            <Button
                                type="dashed"
                                onClick={() => {
                                    add();
                                }}
                                style={{ width: '60%' }}
                            >
                                <PlusOutlined /> 增加可选分辨率
                </Button>
                            <span style={{ marginLeft: '10px', color: 'red' }}>tips: 800*600（长*宽）</span>
                        </Form.Item>
                        {fields.map((field) => (
                            <Form.Item
                                {...formItemLayoutWithOutLabel}
                                required={true}
                                key={field.key}
                            >
                                <Form.Item
                                    {...field}
                                    validateTrigger={['onChange', 'onBlur']}
                                    rules={[
                                        {
                                            required: true,
                                            whitespace: true,
                                            message: "请输入分辨率大小",
                                        },
                                    ]}
                                    noStyle
                                >
                                    <Input placeholder="请输入分辨率大小" style={{ width: '60%' }} />

                                </Form.Item>

                                <MinusCircleOutlined
                                    className="dynamic-delete-button"
                                    style={{ margin: '0 8px' }}
                                    onClick={() => {
                                        remove(field.name);
                                    }}
                                />

                            </Form.Item>
                        ))}

                    </div>
                );
            }}
        </Form.List>
    )

}

export default PrivideResolution